<template>
  <div class="sfzView">
    <nav
        style="
          color: #ffffff;
          font-size: 40px;
          width: 100%;
          text-align: center;
          margin-bottom: 150px;
        "
      >
        {{ this.$appName }}
      </nav>
    <div class="contenter">
      <div style="color: #ffffff;font-size: 45px;">请输入身份证后九位：</div>
      <el-input
        style="width: 250px"
        maxlength="9"
        minlength="9"
        v-model="idNumber"
      ></el-input>
    </div>
    <button class="btnn" @click="checkExaminerByIdCard">点击验证</button>
    <button class="btnn" @click="clickBack">点击返回人脸识别</button>
    <section v-if="options.length > 0" class="kgInfo">
      <div class="kgInfo_title">考官信息选择</div>
      <div class="kgInfo_content">
        <img
          class="headerImg"
          v-if="kgInfo.faceImg"
          :src="'/api' + kgInfo.faceImg"
          alt=""
        />
        <img
          class="headerImg"
          v-if="!kgInfo.faceImg"
          src="../assets/weizhi.png"
          alt=""
        />
        <div class="kgInfo_info">
          <div>
            考官姓名：
            {{ kgInfo.name }}
          </div>
          <div style="display: flex; align-items: center">
            考试类型：
            <el-select
              style="margin-bottom: 0"
              v-model="value"
              placeholder="请选择"
              @change="change"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>身份证号：{{ kgInfo.sfzNumber }}</div>
        </div>
      </div>
      <div class="upLoad" @click="upLoad">确定</div>
    </section>
  </div>
</template>
  
  <script>
import $api from "../utils/api";
export default {
  data() {
    return {
      idNumber: "",//压力容器
      // idNumber: "005068952",//气瓶充装
      kgInfoData: [],
      kgInfo: [],
      options: [],
      value: "",
    };
  },
  created() {
    localStorage.clear();
  },
  methods: {
    checkExaminerByIdCard() {
      if (!this.idNumber) {
        this.$alert("请输入身份证号后九位", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      }
      $api.ExaminerCheckByIdcard(this.idNumber).then((res) => {
        if (res.data.code == 200 && res.status == 200) {
          localStorage.setItem("examinerInfo", JSON.stringify(res.data.data));
          this.kgInfoData = res.data.data;
          this.kgInfoData.forEach((item) => {
            this.options.push({
              value: item.id,
              label: item.workType,
            });
          });
        } else {
          this.$message({
            message: "未找到考官信息",
            type: "warning",
          });
        }
      });
    },
    clickBack() {
      this.$router.push({
        name: "examinerPage",
      });
    },

    change(e) {
      localStorage.setItem("kgId", e);
      this.kgInfoData.forEach((item) => {
        if (item.id == e) {
          this.kgInfo = item;
          localStorage.setItem("imgUrl1", item.signImg);
        }
      });
    },
    upLoad() {
      if (this.kgInfo.workType) {
        this.$router.push({
          name: "openText",
        });
      } else {
        this.$alert("请选择考试类型");
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.sfzView {
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/keji1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.contenter {
  display: flex;
  align-items: center;
  margin: 0 auto;
  font-size: 30px;
  width: 700px;
  height: 200px;
  div{
    font-size: 30px;
  }
}
.btnn {
  width: 300px;
  height: 50px;
  border-radius: 10px;
  font-size: 25px;
  margin-top: 20px;
  margin-left: 50%;
  transform: translate(-50%);
  text-align: center;
  background: #efefef;
  line-height: 50px;
}
.kgInfo {
  width: 600px;
  height: 400px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translateX(-50%);
  background-color: #fff;
  .kgInfo_title {
    width: 100%;
    height: 50px;
    border-radius:    10px 10px 0 0;
    background-color: #00c6ff;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
  }
}
.kgInfo_content {
  display: flex;
  width: 90%;
  margin: 50px auto 20px;
  .headerImg {
    width: 150px;
    height: 200px;
    margin-right: 10px;
  }
  .kgInfo_info {
    div {
      margin-bottom: 40px;
    }
  }
}
.upLoad {
  width: 200px;
  height: 50px;
  border-radius: 10px;
  color: #fff;
  font-size: 35px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  background-color: #00c6ff;
}
</style>
  